<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>verify插件demo</title>
    <link rel="stylesheet" type="text/css" href="../css/verify.css">

    <script>
        (function () {
            if (!window.Promise) {
                document.writeln('<script src="../js/es6-promise.min.js"><' + '/' + 'script>');
            }
        })();
    </script>
    <style>
        .btn {
            border: none;
            outline: none;
            width: 300px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
            background-color: #409EFF;
            color: #fff;
            font-size: 16px;
            letter-spacing: 1em;
        }
    </style>
</head>
<body>
<div class="box">
    <h1>verify---anji</h1>
    <h2 th:text="${message}"></h2>
    <br>
    <h3>一、滑动嵌入式（slider-embed）</h3>
    <div id="panel1">
    </div>
    <h3>二、滑动弹出式（slider-popup）</h3>
    用户名：<input type="text" id="name" placeholder="用户名"/> <br/><br/>
    密&nbsp;&nbsp;&nbsp;码：<input type="text" id="pass" placeholder="密码"/><br/><br/>
    <button class="btn" id='btn'>点击我</button>
    <div id="panel2" style="margin-top:50px;">
    </div>

    <h3>三、点选嵌入式（point-embed）</h3>
    <div id="panel3" style="margin-top:50px;">
    </div>
    <h3>四、点选弹出式（point-popup）</h3>
    <button class="btn" id='btn2'>点击我</button>
    <div id="panel4" style="margin-top:50px;">
    </div>
</div>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/crypto-js.js"></script>
<script src="../js/ase.js"></script>
<script src="../js/verify.js"></script>

<script>
    // 初始化验证码  嵌入式
    $('#panel1').slideVerify({
        // baseUrl:'https://captcha.anji-plus.com/captcha-api',  //服务器请求地址, 默认地址为安吉服务器;
        // baseUrl:'http://localhost:8181/captcha_springmvc_war_exploded',  //local-spring-mvc;
        baseUrl: 'http://localhost:8181',  //local-spring-boot;
        mode: 'fixed',
        imgSize: {
            width: '400px',
            height: '200px',
        },
        barSize: {
            width: '400px',
            height: '40px',
        },
        ready: function () {

        },
        success: function (params) {
            console.log(params, "params");
        },
        error: function () {

        }
    });

    // 初始化验证码  弹出式
    $('#panel2').slideVerify({
        baseUrl: 'http://localhost:8181',
        mode: 'pop',
        containerId: 'btn',
        imgSize: {
            width: '400px',
            height: '200px',
        },
        barSize: {
            width: '400px',
            height: '40px',
        },
        beforeCheck: function () {
            var name = $("#name").val()
            var pass = $('#pass').val()
            console.log(name, pass);
            if (name == '' || pass == '') {
                alert("请输入信息账号密码信息！")
                return false
            } else {
                return true
            }
        },
        ready: function () {

        },
        success: function (params) {

        },
        error: function () {

        }
    });

    // 初始化验证码  嵌入式
    $('#panel3').pointsVerify({
        baseUrl:'http://localhost:8181',
        mode: 'fixed',
        imgSize: {
            width: '500px',
            height: '255px',
        },
        ready: function () {
        },
        success: function (params) {

        },
        error: function () {

        }
    });
    // 初始化验证码  弹出式
    $('#panel4').pointsVerify({
        baseUrl: 'http://localhost:8181',
        containerId: 'btn2',
        mode: 'pop',
        imgSize: {
            width: '400px',
            height: '200px',
        },
        ready: function () {

        },
        success: function (params) {

        },
        error: function () {

        }
    });
</script>
</body>
</html>